<template>
  <div>

	  <myheader></myheader>

	  <br /><br />

	  <Breadcrumb :datas="datas"></Breadcrumb>
	
	<section class="featured-block text-center">
		<div class="container">
            <center>
                商品名称: <input type="text" v-model="name">
                <br><br>

                商品描述: <textarea rows="5" v-wordcount="30" v-autosize v-model="desc"></textarea>
                <br><br>

                商品类别: <Select v-model="category" :datas='param'>                  
                </Select>
                <br><br>

                <video width="300px" height="200px" :src="src" controls="controls" >
                </video><br><br>
                商品演示视频: <input type="file" @change="upload"> 
                <br><br>

                颜色 : <input type="text" v-model="color">
                <br><br>

                薄厚 : <input type="text" v-model="season">
                <br><br>
                <Button @click="submit">新增商品</Button>

            </center>

		</div>
	</section>
	
	<mufooter></mufooter>

  </div>
  
</template>


 
<script>

//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

export default {
  data () {
    return {
		//声明面包屑导航变量
	    datas:[{title:"首页",route:{name:'index'}},{title:'商品添加页面',route:{name:'addgoods'}}],
        name:'',
        desc:'',
        param:['服饰','汽车','食物'],
        category:'服饰',
        src:'',
        mysrc:'',
        uptoken:'',
        color:'',
        season:'',
        //进度展示
        imgload:'',
        //记录商品ID
        cate:{},

    }
  },
  //定义组件
  components:{
	  'myheader':myheader,
	  'mufooter':myfooter,
  },
  mounted:function(){
    //调用商品分类信息接口
      this.get_cateinfo();
  },
  
  methods:{
    //
    get_cateinfo:function(){
      this.axios.get('http://localhost:8000/categoryinfo/')
      .then((result)=>{
        console.log(result.data);

        var catebox = [];

        //循环赋值
        for(var i = 0,I = result.data.length;i<I;i++){
          catebox.push(result.data[i]['cname']);
          //反向赋值
          this.cate[result.data[i]['cname']] = result.data[i]['id']
        }
        this.param = catebox
        console.log(catebox);

      })
    },



    upload:function(e){
		  //声明文件对象
		  let file = e.target.files[0];
		  //声明参数类型
		  let param = new FormData();
		  //添加文件
		  param.append('file',file);
		  //声明上传文件头部
		  let config = {'Content-Type':'multipart/form-data'};

			//向后台发送请求
			this.axios.post('http://localhost:8000/uploadfile/',param,config)
		    .then((result) =>{
				console.log(result);
				//动态赋值
				this.src = 'http://localhost:8000/static/upload/'+result.data.filename;
	
				this.mysrc = result.data.filename;
		  	})


    },


      	//提交商品添加
  	submit:function(){


  		console.log(this.category);
  		console.log(this.cate);


  		//将变量转换为字符串
  		var param_str = {'color':this.color,'season':this.season};
  		console.log(param_str);
  		//强转 {'color':'红色'}
  		param_str = JSON.stringify(param_str);
  		console.log(param_str);

  	//发送请求
    this.axios.get('http://localhost:8000/addgoods/',{params:
    {name:this.name,img:'touxiang.png',video:this.mysrc,desc:this.desc,
    param:param_str,cid:this.cate[this.category],price:10,uid:localStorage.getItem('uid')}}).then((result) =>{
      
			console.log(result);

			this.$Message(result.data.message);

		});


  	},
     
  }
}


</script>
 
<style>



</style>